<template>
  <div class="app-container">
    <el-form
      class="dialog-form"
      :rules="rules"
      ref="dataForm"
      :model="temp"
      label-position="left"
      label-width="120px"
    >
      <el-form-item label="用户名" prop="loginName">
        <el-input v-model="temp.loginName" placeholder="用户名" style="width:300px;"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="temp.password" type="password" placeholder="密码" style="width:300px;"></el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="newPassword">
        <el-input v-model="temp.newPassword" type="password" placeholder="确认密码"  style="width:300px;"></el-input>
      </el-form-item>
      <el-form-item label="称呼" prop="name">
        <el-input v-model="temp.name" placeholder="称呼"  style="width:300px;"></el-input>
      </el-form-item>

      <el-form-item label="所属管理组" prop="roleIdList">
        <el-select v-model="temp.roleIdList" placeholder="请选择">
          <el-option v-for="(item,value) in roleList" :key="value" :label="item.roleName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="Email" prop="email">
        <el-input v-model="temp.email" type="email" placeholder="Email"  style="width:300px;"></el-input>
      </el-form-item>
      <el-form-item label="QQ" prop="qq">
        <el-input v-model="temp.qq" placeholder="QQ"  style="width:300px;"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="temp.mobile" placeholder="手机"  style="width:300px;"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="temp.phone" placeholder="电话"  style="width:300px;"></el-input>
      </el-form-item>

      <el-form-item label="头像" prop="headImg">
          <el-upload
            class="avatar-uploader"
            :action="UPLOAD_URL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess('headImg')"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="temp.headImg" :src="temp.headImg|absUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

      <!-- <el-form-item label="是否启用" prop="status">
         <el-checkbox v-model="temp.status">启用</el-checkbox> <span style="padding-left:20px;color:#ccc;">未启用无法登陆后台</span>
      </el-form-item> -->
      <el-form-item label="是否启用" prop="status">
        <el-radio v-model="temp.status" label="1">是</el-radio>
        <el-radio v-model="temp.status" label="0">否</el-radio>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" size="mini" :loading="submiting" @click="submitFormAction">确定</el-button>
    </div>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor, Quill } from "vue-quill-editor";

let typeFilter = ["未审核", "已审核"];
export default {
  data() {
    return {
      checkList:[],
      container: false,
      roles: [ {role_name: "管理员", id: 14}, {role_name: "CRM客服团队", id: 15}, {role_name: "财务", id: 17}],
      checkStatusList: [
        {
          label: "下线",
          value: 0
        },
        {
          label: "上线",
          value: 1
        }
      ],
      total: 0,
      params: {
        pageNo: 1,
        pageSize: 20
      },
      cmsList: [],
      list: [],
      roleList:[],
      temp: {
        loginName: "",
        status: "",
        roleIdList:'',
        password: "",
        headImg:"http:www.baidu.com"
      },
      editorOption: {
        placeholder: "在这里输入内容",
        modules: {}
      },

      typeFilter: typeFilter,
      rules: {
        loginName: [
          {
            required: true,
            message: "用户名",
            trigger: "change",
            max: 50
          }
        ],
        roleIdList: [
          { required: true, message: "所属管理组不能为空", trigger: "change" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "change" }
        ],
        newPassword:[
          { required: true, message: "请输入确认密码", trigger: "change" }
        ],
        status: [
          { required: true, message: "确认密码不能为空", trigger: "change" }
        ],
        name: [{ required: true, message: "称呼不能为空", trigger: "change" }],
        mobile: [{ required: true, message: "手机不能为空", trigger: "change" },{
            pattern: /^1[0-9]{10}$/, message: '手机号码不正确!'
          }],
        phone: [{ required: true, message: "电话不能为空", trigger: "change" }],
        email: [{ required: true, message: "email不能为空", trigger: "change" }, {
            pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/, message: '请输入邮箱有误'
          }],
        qq: [{ required: true, message: "qq不能为空", trigger: "change" }],
      }
    };
  },
  components: {
    quillEditor
  },
  created() {
    this.$get('/admin/manager/role/list_all')
      .then(data => {
        this.roleList=data;
      })
  },
  filters: {
    typeFilter(status) {
      return typeFilter[parseInt(status)];
    }
  },
  methods: {
    submitFormAction() {
      if(this.temp.password !== this.temp.newPassword){
        this.$message({
            message: '新密码不一致',
            type: 'warning'
        });
        return;
      }
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.submiting = true;
          const postData = Object.assign({}, this.temp);
          let url = "/admin/manager/add";
          if (this.isEditing) {
            url = "/admin/manager/modify";
          }
          this.$post(url, postData)
            .then(data => {

              this.$$notify("操作成功");
              this.dialogFormVisible = false;
              this.temp = {};
            })
            // .catch(err => {
            //   this.$error(err.msg);
            //   this.submiting = false;
            // });
            .finally(err => {
              this.submiting = false;
            });
        }
      });
    }
  }
};
</script>
<style>
.el-table td,
.el-table th {
  padding: 1px 0;
}
.el-table {
  font-size: 12px;
}
.opencolor {
  color: red;
}
.openSearch {
  /* width: 100px; */
  margin-bottom: 10px;
  padding-bottom: 5px;
  /* border-bottom: 1px solid #ccc; */
}
</style>